<template>
	<view >
		<my-header :title="title" ></my-header>
		<uni-card class="acount" style="margin-top: 60px">
			<uni-row>
				<uni-col :span="12" style="display: flex; align-items: center; height: 50px;">
					<image src="../../static/actor.png" class="acountImg" mode=""></image>
					<text class="name">{{shuangfengData ? shuangfengData.user.username : '未登录'}}</text>
				</uni-col>
				<uni-col :span="12" style="display: flex; align-items: center; justify-content: center; height: 50px;">
					<button v-if="!shuangfengData" @tap="toLogin" type="primary" size="mini">登录</button>
					<button v-else @tap="outAcount" type="primary" size="mini">退出</button>
				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card @tap="openHis">
			<!-- <uni-icons type="star" size="22"></uni-icons> -->
			查看我的诉求
		</uni-card>
		<uni-popup ref="inputDialog" type="dialog">
			<view class="inputDialog">
				<uni-forms ref="hisForm" :rules="hisFormRules" :modelValue="hisFormData" class='inputFull'>
					<uni-forms-item name="contact">
						<uni-easyinput v-model="hisFormData.contact" placeholder="请输入手机号"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="verificationCode">
						<uni-easyinput v-model="hisFormData.verificationCode" placeholder="请输入验证码">
							<template #right>
									<button size="mini" type="primary" :disabled="ddl != 60" @click="getCode">{{ddl == 60 ? '点击获取' : ddl + 's'}}</button>	
								</template>
						</uni-easyinput>
					</uni-forms-item>									
				</uni-forms>
				<view class="dialogBtns">
					<view class="closeBtn" @click="close">取消</view>	
					<view class="confirmBtn" @click="toHis">确定</view>	
				</view>
			</view>
			<!-- </uni-popup-dialog> -->
		</uni-popup>
	</view>
</template>

<script>
	import MyHeader from '@/components/header.vue'
	export default {
		components: {
			MyHeader,
		},
		data() {
			return {
				title: '我的',
				hisFormRules: {
					contact: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}]
					},
					verificationCode: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					},
				},
				hisFormData: {
					contact: '',
					verificationCode: ''
				},
				ddl: 60,
				shuangfengData: null,
			}
		},
		onShow() {
			//获取本地保存账号信息 修改登录状态
			let that = this
			uni.getStorage({
				key: 'shuangfengData',
				success: function (res) {
					that.shuangfengData = res.data
					console.log(res.data, that.shuangfengData);
				}
			});
		},
		methods: {
			outAcount() {
				let that = this
				uni.removeStorage({
					key: 'shuangfengData',
					success: function (res) {
						console.log('remove success');
						that.shuangfengData = null,
						uni.showToast({
							title: '该账号已退出',
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			openHis() {
				console.log(this.shuangfengData);
				if(this.shuangfengData) {
					uni.showLoading({
						title: '加载中'
					});
					// return
					uni.request({
						url: '/sf_enterprise_service/business/demand/selflist/',
						// url: '/sf_enterprise_service/business/demand/list',
						data: {
							userId: this.shuangfengData.user.userId
						},
						method: 'GET',
						header: {
							'Token': this.shuangfengData.token
						},
						success: (res) => {		
							console.log(res, 'res??')
							if(res.data.code == 0) {	
								if(res.data.data?.length) {	
									uni.navigateTo({
										url: '/pages/form/hisForm?detail=' + JSON.stringify(res.data.data),
									})
								} else {
									uni.showToast({
										title: '暂无历史诉求',
										icon: 'none',
										duration: 3000
									})
								}
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 3000
								})
							}
						},
						complete: () => {							
							uni.hideLoading();
						}
					})
				} else {
					uni.showToast({
						title: '暂未登录',
						duration: 2000,
						icon: 'none'
					});
					// this.toLogin()
				}
				
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			close() {
				this.$refs.inputDialog.close()
			},
			// 展示历史申诉
			toHis() {					
				console.log('tohis')
				this.$refs['hisForm'].validate().then(res => {
					console.log('success', res);
					uni.request({
						url: '/sf_enterprise_service/business/anondemand/selflist/',
						data: {
							contact: this.hisFormData.contact,
							code: this.hisFormData.verificationCode
						},
						method: 'GET',
						success: (res) => {		
							console.log(res, 'res??')
							if(res.data.data?.length) {	
								uni.navigateTo({
									url: '/pages/form/hisForm?detail=' + JSON.stringify(res.data.data),
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								})
							}
						},
						complete: () => {							
							uni.hideLoading();
						}
					})
					
				}).catch(err => {
					console.log('err', err);
				})
				
			},
			
			// 获取验证码
			getCode() {
				if(this.hisFormData.contact.length == 11) {
					uni.showLoading({
						title: '加载中'
					});
					// 走接口
					// 倒计时不可点击
					uni.request({
						url: '/sf_enterprise_service/business/sms/send/' + this.hisFormData.contact,
						// data: this.customFormData,
						method: 'GET',
						success: (res) => {		
							console.log(res, 'res??')
							uni.hideLoading();
							if(res.data.code == 0) {
								uni.showToast({
									title: '已发送，五分钟内有效',
									duration: 2000
								});
								let that = this
								let Interval = setInterval(() => {
									changeCodeDel()
								}, 1000)
								function changeCodeDel() {
									if(that.ddl > 0) {        
									  that.ddl --
									} else {
									  that.ddl = 60;
									  clearInterval(Interval)
									}
								  }
							} else {
								uni.showToast({
									title: res.data.msg,
									duration: 2000
								});
							}
						},
						complete: () => {							
							uni.hideLoading();
						}
					})
				
				} else {
					uni.showToast({
						title: '请填写正确手机号',
						icon: 'none'
					})
				}
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login',
				})
			},
		}
	}
</script>

<style scoped>
.acountImg {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
.name {
	font-weight: bold;
	padding-left: 10px;
}
.inputDialog {
	width: 80vw;
	background-color: #fff;
	border-radius: 10rpx;
	
}
.inputDialog .uni-forms {
	padding: 80rpx 40rpx 20rpx 40rpx;
	box-sizing: border-box;
}
.dialogBtns {
	display: flex;
	border-top: 1px solid #d3d3d3;	
	
}
.dialogBtns view {
	flex-grow: 1;
	text-align: center;
	padding: 20rpx 0;
}
.dialogBtns .confirmBtn {
	background-color: #5ab8ff;
	color: #fff;
}
</style>
